<template>
  <div class="process-form">
    <FormDialog :append-to-body="true" class="fixed-dialog-height" :title="viewType?'查看':'处理'" :show.sync="drawer" width="90%" :footer-show="false" @on-cancel="closeDrawer">
      <el-timeline v-if="taskData!=null && taskData.length!=0">
        <el-timeline-item v-for="(item,index) in taskData" id="timeLineOrder" :key="index" hide-timestamp :color="item.isCurrent? 'orange' : '#0bbd87'" size="large">
          <el-card shadow="never">
            <div :class="item.isShow && (!viewType || (viewType&&!item.isCurrent)) ? 'info-title pointer':'info-title'" @click="clickTimeLineItem(taskData,index)">
              <span> {{ item.nodeName }}</span>
              <span class="apply-user">{{ item.approveUser+' '+item.applyTime }}</span>
              <i v-if="item.isShow && (!viewType || (viewType&&!item.isCurrent))" :class="item.active?'el-icon-arrow-down':'el-icon-arrow-right'" />
            </div>
            <div v-if="item.active && item.isShow" class="padding">
              <InitializationForm :view-type="viewType ? viewType:(item.isCurrent? false: true)" :form-key="item.formKey" :task-id="item.taskId" :work-order-num="item.workOrderNum" v-on="$listeners" />
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </FormDialog>
  </div>
</template>

<script>

// import { records } from '@neu/dcam-ui/api/workOrder'
import { recordsNoUser } from '@neu/dcam-ui/api/workOrder'
// 混入所有组件
// import forms from '../mixin/forms.js'
import InitializationForm from '@neu/dcam-ui/views/workOrder/forms/initializationForm'
import FormDialog from '@neu/biz-core/components/FormDialog'

export default {
  name: 'WorkOrderListForm',
  // 混入所有表单
  // mixins: [forms],
  components: {
    FormDialog
    // InitializationForm
  },
  props: {
    // 根据id可判断是新建还是更新
    workOrderNum: {
      required: false,
      type: String,
      default: 'NULL'
    },
    viewType: {
      required: false,
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      taskData: [],
      drawer: true
    }
  },
  beforeCreate() {
    this.$options.components.InitializationForm = InitializationForm
  },
  created() {
    recordsNoUser(this.workOrderNum).then(res => {
      const data = res.data
      if (this.viewType) {
        data.forEach(t => {
          if (t.isCurrent) {
            t.active = false
          } else {
            t.active = true
          }
        })
      }
      this.taskData = data
    })
  },
  methods: {
    closeDrawer() {
      this.$emit('cancelNewOrderForm')
    },
    clickTimeLineItem(dataList, index) {
      if (dataList[index].isCurrent && this.viewType) {
        return
      }
      if (dataList[index].isShow) {
        dataList[index].active = !dataList[index].active
      }
    }
  }
}
</script>
<style>
 #timeLineOrder .el-timeline-item__tail{
    border-left: 2px dotted #0bbd87 !important;
    margin-top: 20px !important
}
#timeLineOrder .el-timeline-item__node{
  margin-top: 20px !important
}
</style>
<style lang='scss' scoped>
/*自定义标题*/
.info-title{
  display: flex;
  align-items: center;
  // padding-bottom:10px;
  & > span{font-weight:normal; padding-left: 4px;  }
  & > i{
    flex:2;
    // font-weight: bold;
    padding-left:10px;
    font-size: 16px;
    text-align: right;
  }
}
.pointer{
  cursor:pointer;
}
.padding {
  padding-top:20px;
}
.apply-user{
  padding-left:10px;
  font-size: 12px;
  line-height: 16px;
  padding-top: 1px;
  color: grey;
}
</style>
